<template>
	<div class="audio-player" :style="{ width: width, height: height }">
		<audio ref="audioElement" :src="audioUrl" @timeupdate="updateTime" @loadedmetadata="updateDuration"></audio>

		<div class="controls">
			<button @click="togglePlay">
				{{ isPlaying ? '⏸' : '▶' }}
			</button>
			<div class="time-display">
				{{ formatTime(currentTime) }} / {{ formatTime(duration) }}
			</div>
			<div class="progress-bar" @click="seekToTime" ref="progressBar">
				<div class="progress" :style="{ width: progress + '%' }"></div>
			</div>
			<a :href="audioUrl" download @click="preventDefaultIfPlaying">
				<button>
					<svg t="1739433234109" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4832" width="2.5vh" height="2.5vh">
						<path d="M804.571429 749.714286v54.857143a18.285714 18.285714 0 0 1-18.285715 18.285714H237.714286a18.285714 18.285714 0 0 1-18.285715-18.285714v-54.857143a73.142857 73.142857 0 0 0-73.142857-73.142857H73.142857a73.142857 73.142857 0 0 0-73.142857 73.142857v164.571428a109.714286 109.714286 0 0 0 109.714286 109.714286h804.571428a109.714286 109.714286 0 0 0 109.714286-109.714286v-164.571428a73.142857 73.142857 0 0 0-73.142857-73.142857h-73.142857a73.142857 73.142857 0 0 0-73.142857 73.142857z" fill="#333333" p-id="4833"></path>
						<path d="M640 353.462857V73.142857a73.142857 73.142857 0 0 0-73.142857-73.142857h-109.714286a73.142857 73.142857 0 0 0-73.142857 73.142857v280.32a18.285714 18.285714 0 0 1-18.285714 18.285714h-85.577143a36.571429 36.571429 0 0 0-27.794286 60.16l231.862857 272.822858a36.571429 36.571429 0 0 0 54.857143 0L771.657143 431.908571a36.571429 36.571429 0 0 0-27.794286-60.16H658.285714a18.285714 18.285714 0 0 1-18.285714-18.285714z" fill="#333333" p-id="4834"></path>
					</svg>
				</button>
			</a>
			<!-- 倍速选择按钮及弹出选择区域 -->
			<div class="playback-rate-selector">
				<button @click="toggleRateSelector">{{ playbackRate }}x</button>
				<div v-if="isRateSelectorVisible" class="rate-options">
					<button
						v-for="rate in availableRates"
						:key="rate"
						:class="{ 'active': rate === playbackRate }"
						@click="setPlaybackRate(rate)"
					>
						{{ rate }}x
					</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		audioUrl: {
			type: String,
			required: true
		},
		width: {
			type: String,
			default: '300px'
		},
		height: {
			type: String,
			default: '80px'
		}
	},

	data() {
		return {
			isPlaying: false,
			currentTime: 0,
			duration: 0,
			playbackRate: 1,
			isRateSelectorVisible: false,
			availableRates: [0.5, 1,1.25, 1.5, 2]
		};
	},

	computed: {
		progress() {
			return (this.currentTime / this.duration) * 100 || 0;
		}
	},

	methods: {
		togglePlay() {
			const audio = this.$refs.audioElement;
			if (this.isPlaying) {
				audio.pause();
			} else {
				audio.play();
			}
			this.isPlaying = !this.isPlaying;
		},

		updateTime(e) {
			this.currentTime = e.target.currentTime;
		},

		updateDuration() {
			this.duration = this.$refs.audioElement.duration;
		},

		seekToTime(e) {
			const progressBar = this.$refs.progressBar;
			const rect = progressBar.getBoundingClientRect();
			const pos = (e.clientX - rect.left) / rect.width;
			this.$refs.audioElement.currentTime = pos * this.duration;
		},

		formatTime(seconds) {
			if (!seconds) return '00:00';
			const minutes = Math.floor(seconds / 60);
			const remainingSeconds = Math.floor(seconds % 60);
			return `${String(minutes).padStart(2, '0')}:${String(remainingSeconds).padStart(2, '0')}`;
		},

		preventDefaultIfPlaying(e) {
			if (this.isPlaying) {
				e.preventDefault();
				this.togglePlay();
				setTimeout(() => {
					e.target.click();
				}, 100);
			}
		},

		toggleRateSelector() {
			this.isRateSelectorVisible = !this.isRateSelectorVisible;
		},

		setPlaybackRate(rate) {
			this.playbackRate = rate;
			this.$refs.audioElement.playbackRate = rate;
			this.isRateSelectorVisible = false;
		}
	}
};
</script>

<style scoped>
.audio-player {
	/* 移除边框样式 */
	/* border: 1px solid #ccc; */
	padding: 0px;
	border-radius: 5px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.controls {
	display: flex;
	align-items: center;
	gap: 10px;
}

button {
	border: none;
	background: none;
	cursor: pointer;
	font-size: 20px;
	padding: 5px 10px;
}

.progress-bar {
	flex: 1;
	height: 5px;
	background-color: #666666;
	cursor: pointer;
	border-radius: 3px;
}

.progress {
	height: 100%;
	background-color: #42b983;
	border-radius: 3px;
	transition: width 0.1s linear;
}

.time-display {
	font-size: 14px;
	color: #666;
}

.playback-rate-selector {
	position: relative;
}

.rate-options {
	position: absolute;
	top: 100%;
	left: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
	background-color: white;
	border: 1px solid #ccc;
	border-radius: 3px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	z-index: 10;
	padding: 5px;
}

.rate-options button {
	border: 1px solid #ccc;
	border-radius: 3px;
	font-size: 16px;
	padding: 3px 6px;
}

.rate-options button.active {
	background-color: #42b983;
	color: white;
}
</style>
